<template>
  <div class="browse-complaints">
    <el-card>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :inline="true"
        label-width="130px"
      >
        <el-form-item label="商家ID：" prop="sellerId">
          <el-input v-model="ruleForm.sellerId" />
        </el-form-item>
        <el-form-item label="买手ID：" prop="buyerId">
          <el-input v-model="ruleForm.buyerId" />
        </el-form-item>
        <el-form-item label="子任务ID：" prop="buyerMissionId">
          <el-input v-model="ruleForm.buyerMissionId" />
        </el-form-item>
        <el-form-item label="买手淘宝账号：" prop="buyerTaobao">
          <el-input v-model="ruleForm.buyerTaobao" />
        </el-form-item>
        <el-form-item label="买手订单号码：" prop="buyerOrderNumber">
          <el-input v-model="ruleForm.buyerOrderNumber" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="搜索收藏申诉" :name="1" />
        <el-tab-pane label="购买申诉" :name="2" />
        <el-tab-pane label="评价申诉" :name="3" />
      </el-tabs> -->

      <el-table
        v-loading="isLoading"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="buyer_id"
          label="买手ID"
          align="center"
          width="100"
        />
        <el-table-column
          prop="seller_id"
          label="商家ID"
          align="center"
          width="100"
        />
        <el-table-column
          prop="seller_mission_id"
          align="center"
          label="父任务ID"
          width="100"
        />
        <el-table-column
          prop="buyer_mission_id"
          align="center"
          label="子任务ID"
          width="100"
        />
        <el-table-column
          prop="appeal_time"
          align="center"
          label="申诉时间"
          width="250"
        />
        <el-table-column
          prop="appeal_content"
          align="center"
          label="申诉内容"
        />
        <el-table-column
          align="center"
          label="状态"
        >
          <template slot-scope="scope">
            {{ scope.row.examine_status | getExamineStatus }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.examine_status === 'IN_REVIEW'" type="text" size="small" @click="examine(scope.row, scope.$index, 'VERIFIED')">通过</el-button>
            <el-button v-if="scope.row.examine_status === 'IN_REVIEW'" type="text" size="small" @click="examine(scope.row, scope.$index, 'REJECTED')">不通过</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { appealSearch, buyerMissionExamine } from '@/api/user'

export default {
  filters: {
    getExamineStatus(status) {
      let StringType = ''
      switch (status) {
        case 'IN_REVIEW' :
          StringType = '审核中'
          break
        case 'VERIFIED' :
          StringType = '审核通过'
          break
        case 'REJECTED' :
          StringType = '审核不通过'
          break
      }
      return StringType
    }
  },
  data() {
    return {
      ruleForm: {
        pageNumber: 1
      },
      // activeName: 1,
      tableData: [],
      total: 0,
      isLoading: false
    }
  },
  mounted() {
    this.appealSearch()
  },
  methods: {
    appealSearch() {
      this.isLoading = true
      appealSearch(this.ruleForm).then(res => {
        this.tableData = res.list
        this.isLoading = false
        this.total = res.totalRow
      }).catch(() => {
        this.isLoading = false
      })
    },
    examine(row, index, status) {
      const { buyer_mission_id } = row
      this.$confirm(`是否${status === 'VERIFIED' ? '通过' : '不通过'}此申诉?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        buyerMissionExamine({
          id: buyer_mission_id,
          examineStatus: status,
          missionStatus: 'COMPLETE'
        }).then(res => {
          this.$message({
            type: 'success',
            message: '审核成功!'
          })
          this.appealSearch()
        })
      })
    },
    onSubmit() {
      this.appealSearch()
    }
  }
}
</script>
<style lang="scss">
.browse-complaints {
  .el-card{
    .el-input {
      width: 200px;
    }
    .el-select {
      width: 200px;
    }
  }
}
</style>

